<template>
	<uni-nav-bar title="报销记录" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
	<scroll-view scroll-y="true" enable-back-to-top @scrolltolower="loadMore" class="scroll-box"
		:style="{ height: pageHeight + 'px' }">
		<view class="package_sale" v-for="(item,index) in attendanList" :key="index"
			:style="{marginTop:index==0?'0px':'15rpx 0px'}">
			<view class="space-between">
				<view @click="open(item.image)">报销<uni-icons type="images" size="20" color="#666"
						style="margin-left:10rpx;"></uni-icons></view>
				<view>{{item.status_text}}</view>
			</view>
			<view class="top" style="font-size:26rpx;">报销金额：{{item.money}}</view>
			<view class="top" style="font-size:26rpx;">申请时间：{{item.createtime}}</view>
			<view class="top" style="font-size:26rpx;" v-if="item.updatetime">审批时间：{{item.updatetime}}</view>
			<view class="top" style="margin:10rpx 0px;">{{item.content}}</view>
			<view class="top" v-if="item.admin_name">{{item.admin_name}}审批</view>
		</view>
		<Popu v-if="attendanList.length<1" :pageHeight="pageHeight" text="暂无报销记录"></Popu>
	</scroll-view>
	<uni-popup ref="popup" type="center">
		<image style="width: 600rpx;border-radius: 5px;" mode="widthFix" :src="image"
			@click="close()"></image>
	</uni-popup>
</template>
<script setup lang="ts">
	import { navBack } from '@/utils/navigator';
	import { toPublish } from '@mqtt';
	import { ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { showLoading } from '@/utils/prompt';
	import { getBaoxiaoList } from '@/gql/earthPushing/attendance';
	import Popu from '@c/earthPushing/common/popu.vue';
	import { getDriverID } from '@/stores/driverID';
	const staff_id = getDriverID();
	const attendanList = ref([])
	const lastPage = ref(1);
	const currentPage = ref(1);
	const pageHeight = ref()
	const month = ref()
	const image = ref()

	const popup = ref(null)
	uni.getSystemInfo({
		success: function (res) {
			pageHeight.value = res.windowHeight - 45;
		},
	});
	onLoad((pearm) => {
		month.value = pearm.month
		init()
	})
	function init() {
		showLoading()
		const payload = {
			query: getBaoxiaoList,
			variables: {
				page: currentPage.value,
				staff_id
			},
		};
		toPublish(
			'ql/staff/getBaoxiaoList',
			payload,
			(obj : any) => {
				const { getBaoxiaoList } = obj.data;
				attendanList.value = [...attendanList.value, ...getBaoxiaoList.list];
				lastPage.value = getBaoxiaoList.lastpage;
			}
		);
	}
	/**
	 * 加载更多
	 */
	function loadMore() {
		if (currentPage.value < lastPage.value) {
			currentPage.value++;
			init();
		}
	}
	function open(im : string) {
		image.value = im
		popup.value.open();
	}
	function close() {
		popup.value.close();
	}
</script>

<style scoped lang="less">
	.top {
		margin-top: 5rpx;
	}
</style>